import styled from '@emotion/styled';
import React, { useEffect, useState } from 'react';
import { Radio, RadioChangeEvent } from 'antd';
import AgentService from '@/modules/Agent';
import useSyncState from '../hooks/useSyncState';
import { useTranslation } from 'react-i18next';

interface TranscriptProps {
	errorMessage: string;
	transcriptValue: string | number;
	onChangeTranscriptGroups: (e: RadioChangeEvent) => void;
}

const TranscriptContainer = styled.div``;

const TranscriptSpan = styled.span`
	display: inline-block;
	font-size: 13px;
	color: #202020;
	padding-bottom: 8px;
`;

const TranscriptGroups = styled.div`
	height: 211px;
	background: #ffffff;
	border: 1px solid #e8e8e8;
	overflow-y: auto;
	.ant-radio-group {
		display: flex;
		flex-direction: column;
		margin-top: 18px;
		margin-left: 12px;
		.ant-radio-wrapper {
			margin-bottom: 10px;
		}
		.ant-radio-inner {
			background-color: #fff;
		}
	}
`;

const ErrorMessage = styled.span`
	display: inline-block;
	font-size: 12px;
	color: #f8646a;
`;

const Transcript = (props: TranscriptProps) => {
	const { t } = useTranslation();
	const { errorMessage, transcriptValue, onChangeTranscriptGroups } = props;
	useEffect(() => {}, []);

	return (
		<TranscriptContainer>
			<TranscriptSpan>{t('select-testimony-transcribe')}</TranscriptSpan>
			<TranscriptGroups>
				<Radio.Group onChange={e => onChangeTranscriptGroups && onChangeTranscriptGroups(e)} value={transcriptValue} buttonStyle="solid">
					{AgentService.transcriptData.map((item, index) => {
						return (
							<Radio key={item.id} value={item.id} checked={index === 0}>
								{item.message}
							</Radio>
						);
					})}
				</Radio.Group>
			</TranscriptGroups>
			{errorMessage ? <ErrorMessage>{errorMessage}</ErrorMessage> : ''}
		</TranscriptContainer>
	);
};

export default Transcript;
